﻿<%@ Page Title="" Language="C#" MasterPageFile="~/templates/general.master" AutoEventWireup="true" CodeFile="docs.aspx.cs" Inherits="docs" %>

<%@ MasterType VirtualPath="~/templates/general.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="Server">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dosis|Open+Sans" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/font-awesome.min.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/animate-custom.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-css.css")%>" rel="stylesheet" />
    <link type="text/css" href="<%=Page.ResolveUrl("~/css/tabs/navion-responsive.css")%>" rel="stylesheet" />
    <link rel="stylesheet" href="<%=Page.ResolveUrl("~/css/wizard/icomoon.css")%>" />
    <link href="<%=Page.ResolveUrl("~/css/scroll/jquery.mCustomScrollbar.css")%>" rel="stylesheet" />
    <script src="<%=Page.ResolveUrl("~/js/scroll/jquery.mCustomScrollbar.concat.min.js")%>"></script>
    <style type="text/css">
        .one
        {
            width: 79%;
            float: left;
        }

        .two
        {
            width: 20%;
            float: right;
        }

        .nav-submenu-content > div ~ div
        {
            margin-left: 0px;
        }

        .iframe-content
        {
            width: 96%;
            height: 320px;
            overflow: auto;
        }
    </style>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#helpPages').change(function () {

                var selected = $(this).val();
                if (selected == "Users") {
                    $('#usersHelpPage').show();
                    $('#dataLoggingHelpPage').hide();
                    $('#chartsHelpPage').hide();
                    $("#txtInfo").css("outline", "");
                    $("#txtInfo").css("margin-left", "");
                    $("#txtInfo").css("margin-top", "");
                    $("#txtInfo").css("width", "96%");
                }
                    //else if (selected == "Devices")
                    //      $('#devicesHelpPage').show();
                else if (selected == "DataLogging") {
                    $('#dataLoggingHelpPage').show();
                    $('#usersHelpPage').hide();
                    $('#chartsHelpPage').hide();
                    $("#txtInfo").css("outline", "");
                    $("#txtInfo").css("margin-left", "");
                    $("#txtInfo").css("margin-top", "");
                    $("#txtInfo").css("width", "96%");
                }
                else if (selected == "Chart") {
                    $('#chartsHelpPage').show();
                    $('#dataLoggingHelpPage').hide();
                    $('#usersHelpPage').hide();
                    $("#txtInfo").css("outline", "");
                    $("#txtInfo").css("margin-left", "");
                    $("#txtInfo").css("margin-top", "");
                    $("#txtInfo").css("width", "96%");
                } else if (selected == "-1") {


                    $("#txtInfo").css("outline", "3px solid rgb(235, 46, 46)");
                    $("#txtInfo").css("margin-left", "3px");
                    $("#txtInfo").css("margin-top", "3px");
                    $("#txtInfo").css("width", "94.5%");
                    $('#usersHelpPage').hide();
                    $('#dataLoggingHelpPage').hide();
                    $('#chartsHelpPage').hide();
                }




            });

        });

    </script>
    <script>
        (function ($) {
            $(window).load(function () {
                $(".iframe-content").mCustomScrollbar({
                    autoHideScrollbar: true,
                    theme: "dark-thin",
                    advanced: {
                        updateOnContentResize: true,
                        updateOnBrowserResize: true
                    }
                });
            });
        })(jQuery);
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div class="fullScreenItem loading" id="docsPage">

        <!-- Start Main Item - Metro Style -->
        <div class="nav-metro">

            <!-- Start Sub Menu -->
            <input type="radio" class="nav-subctrl" id="submenu-2" name="navion">
            <div class="nav-submenu animated nav-fadeInUp">

                <!-- Start Sub Tab - What is it about -->
                <label class="nav-subtab subtab-pos-2 solid-orange-2" for="nav-subtab-3c">
                    <span>What is it about</span>
                </label>
                <!-- End Sub Tab - What is it about -->

                <!-- Start Sub Tab Content - What is it abouty -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-3c" checked />
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-2 solid-orange-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">

                        <div class="nav-col-0 dark-text">

                          <p style="text-align:justify;">Gadgeteer Internet of Things API is a project sponsored by Microsoft Research for creating APIs to solve some of the existing challenges 
                          in realising the vision of Internet of Things (IoT). Furthermore, it promotes the Microsoft’s .NET Gadgeteer Platform for integrating with the API
                          and help developers to exploit the benefits and advances in IoT arena.</p>
                         <p style="text-align:justify;">This project aimed to create Web APIs for connecting hardware devices to the Internet, establish a platform for device management,
                          address privacy issues associated with IoT, enable communication between things in the Internet and deliver a generic solution to support
                          wide range of hardware devices apart from Gadgeteer. Moreover, another important aspect of this project was to make it extendable and scalable
                          to provision future improvements to this system.</p>
                        </div>
                        <div class="clearspace"></div>

                    </div>

                </div>
                <!-- End Sub Tab Content - What is it about -->

                <!-- Start Sub Tab - Libraries -->
                <label class="nav-subtab subtab-pos-3 solid-green-2" for="nav-subtab-2c">
                    <span>Libraries</span>
                </label>
                <!-- End Sub Tab - Libraries -->

                <!-- Start Sub Tab Content - Libraries -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-2c">
                <div class="nav-sub-container animated nav-fadeInRight nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-3 solid-green-2"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-col-2 dark-text">
                            <div id="downloadLib" class="solid-orange-2 light-text" style="width: 92%; text-align: center; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 140px; height: 140px;">
                                Download Gadgeteer Library
                            </div> 
                        </div>
                        <div class="nav-col-2 dark-text">
                            <div id="downloadUserManual" class="solid-darkblue light-text" style="width: 92%; text-align: center; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 140px; height: 140px;">
                                Library User Manual
                            </div> 
                        </div>
                        <div class="clearspace"></div>
                    </div>
                    <!-- End Content Zone -->

                </div>
                <!-- End Sub Tab Content - Libraries -->

                <!-- Start Sub Tab - API Services -->
                <label class="nav-subtab subtab-pos-4 solid-darkblue" for="nav-subtab-4c">
                    <span>API Services</span>
                </label>
                <!-- End Sub Tab - API Services -->

                <!-- Start Sub Tab Content - API Services -->
                <input type="radio" class="nav-subtab-ctrl" name="navion-subtab" id="nav-subtab-4c">
                <div class="nav-sub-container animated nav-fadeInLeft nav-subtab-content dark-text transparent-mist">

                    <!-- Start Active Line -->
                    <div class="nav-subtab-active subtab-pos-4 solid-darkblue"></div>
                    <!-- End Active Line -->

                    <!-- Start Content Zone -->
                    <div class="nav-submenu-content">
                        <div class="nav-col-0 dark-text">
                              <div class="one">
                            <div id="txtInfo" class="solid-darkblue light-text" style="text-align: center; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                Our API provides different classes of services. Choose one from the dropdown list.
                            </div>
                        </div>
                        <div class="two">
                            <select id="helpPages" class="solid-darkblue light-text" style="text-align: center; height: 45px; margin-bottom: 10px; font-size: 14px; padding: 2%; font-family: Trebuchet, Arial, sans-serif; line-height: 17px;">
                                <option value="-1">-Any-</option>
                                <option value="Users">Users</option>
                                <option value="Devices">Devices</option>
                                <option value="DataLogging">DataLogging</option>
                                <option value="Chart">Chart</option>
                            </select>
                        </div>
                              <div id="usersHelpPage" style="display: none;" class="iframe-content">
                                <iframe src="http://uclwebservicetest.cloudapp.net/Services/users.svc/help" style="border: 3px #FFFFFF dotted;" name="usersIframe" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="400px"></iframe>
                            </div>

                            <%--
                                <div id="devicesHelpPage" style="display: none;"  class="iframe-content">   
                                    <iframe src="http://uclwebservicetest.cloudapp.net/Services/device.svc/help" style="border: 3px #FFFFFF dotted;display:none;" name="devicesIframe" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="100%"></iframe>
                                </div>
                            --%>
                            <div id="dataLoggingHelpPage" style="display: none;" class="iframe-content">
                                <iframe src="http://uclwebservicetest.cloudapp.net/Services/DataLogging.svc/help" style="border: 3px #FFFFFF dotted;" name="dataLoggingIframe" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="100%"></iframe>
                            </div>
                            <div id="chartsHelpPage" style="display: none;" class="iframe-content">
                                <iframe src="http://uclwebservicetest.cloudapp.net/Services/Chart.svc/help" style="border: 3px #FFFFFF dotted;" name="chartsIframe" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="100%"></iframe>
                            </div>
                        </div>
                        <div class="clearspace"></div>
                    </div>

                </div>
                <!-- End Sub Tab Content - API Services -->
            </div>
            <!-- End Sub Menu -->
        </div>
        <!-- End Main Item - Metro Style -->
    </div>
</asp:Content>

